/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require i_wonder/dashboard
 *= require i_wonder/events
 *= require i_wonder/reports
 *= require i_wonder/metrics
  *= require i_wonder/ab_tests
*/

@import "_shared.css.scss";

html, body { background-color: #e5e5e5;  font-family: Verdana, Helvetica, Arial; font-size: 14px; }

.flash { padding: 5px 8px; margin: 10px 0; @include rounded_corners(3px);
  &.flash_notice { background-color: #CFC; border: solid 1px #6C6; }
  &.flash_warning { background-color: #FFFFE0; border: solid 1px #ffa500; }
  &.flash_error, &.flash_alert { background-color:$pale_red; border: solid 1px$dark_red; }
}

#i_wonder_wrapper {width:75%; margin: 20px auto 0 auto; @include shadow(); @include rounded_corners(4px); overflow:hidden; background-color: #FFF;
  
  nav {background-color:#777; @include quick_grad(#777, 0.2);  text-align:right; @include rounded_corners(4px);
    a, span { display:block; padding:5px 10px;}
    a { font-weight:bold; color:#eef; float:left; text-decoration:none; border-right:1px solid #222; border-left:1px solid #778; text-shadow:-1px -1px 1px #444;
      &:hover {color:#bbb; text-shadow:1px 1px 1px #333;}
    }
    span { color:#234;}
  }
  #container { padding: 20px 40px; }
  
  p.description { font-size:90%; color:#555;}
  
  p.empty_list {color:#666; }

  ul.primary_list { padding:0px; margin:10px 0; border:1px solid $light_blue_box_border; border-bottom:none; background-color:$light_blue_box_background;
    li { list-style:none; padding:0px; margin:0px; border-bottom:1px solid $light_blue_box_border;
      a {display:block; padding:5px; text-decoration:none; height:40px;
        h3 {padding:0px; margin:0 0 10px 0; font-size:110%; color:#000; font-weight:normal;
          span {color:#555; font-weight:normal;}
        }
        p {padding:0px; margin:0px; font-size:85%; color:#333;}
        &:hover { background-color:#eef; color:black;
          * {text-decoration:none; color:blue;}
        }
      } 
    }
  }
  
  form.main_form { background-color:$light_blue_box_background; border:1px solid $light_blue_box_border; padding:10px 15px; display:inline-block;
   h3 {margin:0 0 10px 0;}
   .field { margin:20px 0 20px 0;
     label {font-weight:bold; color:#333; font-size:90%; margin-bottom:5px; display:block;}
     input, textarea, select {margin-left:0px; clear:left;}
     input[type=checkbox] {float:left; margin-right:5px;}
     input[type=submit] {font-size:120%; font-weight:bold;}
     span.description {color:#555; font-size:80%;}
   }
  }
  
  form .field_with_errors { display:inline;
    label { color:red; }
    input { color:red; border-color:red;}
  }

  #error_explanation {
    width: 450px;
    border: 2px solid red;
    padding: 7px;
    padding-bottom: 0;
    margin-bottom: 20px;
    background-color: #f0f0f0;
    h2 {
      text-align: left;
      font-weight: bold;
      padding: 5px 5px 5px 15px;
      font-size: 12px;
      margin: -7px;
      margin-bottom: 0px;
      background-color: #c00;
      color: #fff; }
    ul li {
      font-size: 12px;
      list-style: square; } }
  
}